<template>
  <div class="cadre-view-coursewrae">
    <video
      :id="id"
      class="video-js vjs-big-play-centered vjs-fluid"
      controls
      preload="auto"
      width="100%"
      height="100%"
    >
      <source
        :type="videoType"
        :src="src"
      >
    </video>
  </div>
</template>
<script>
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  name: 'NewsPreview',
  props: {
    fileId: {
      type: String,
      default: ''
    },
    origin: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      numPages: '',
      view: '/API-DOCUMENT/document/file/download?id=',
      src: '',
      id: `video_${new Date().getTime()}`,
      videoType: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.myPlayer = Videojs(document.getElementById(this.id), {
        playbackRates: [0.5, 1, 1.5, 2],
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: false,
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        controlBar: {
          playToggle: true,
          volumePanel: {
            inline: false
          }
        }
      })
    })
  },
  created() {
    this.src = this.origin === 1 ? this.view + this.fileId : this.fileId
    this.videoType = /\.m3u8$/.test(this.src) ? 'application/x-mpegURL' : 'video/mp4'
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
$mainColor: #18a5fd;
.cadre-view-coursewrae {
  height: 400px;
  overflow-y: auto;
  .video-js {
    width: 100%;
    max-height: 400px !important;
    background-color: black;
  }
}
</style>

